<template>
    <div>
        <h2>Axios 请求数据</h2>
        <h2>msg -- {{msg}}</h2>
        <div>
            <p>展示留言</p>
            <div v-for="(l,i) in list" :key='i'>
                <p>楼层:{{i+1}}</p>
                <p>标题:{{l.title}}</p>
                <p>内容:{{l.content}}</p>
                <p>操作:<button @click="deleteOne(l,i)">删除</button><button @click="updataOne(l,i)">修改</button></p>
            </div>
        </div>
        
        <div>
            <p>添加留言</p>
            <p><input type="text" placeholder="标题" v-model="form.title"></p>
            <p><input type="text" placeholder="内容" v-model="form.content"></p>
            <button @click="addTodata">提交</button>
        </div>
    </div>
</template>

<script>
import axios from "axios"
axios.defaults.baseURL ="http://localhost:2116/"
export default {
    data(){
        return{
            msg:"Vue is so easy",
            form:{},
            list:[]
        }
    },
    created(){
        this.getList()
    },
    methods:{
        // 更新留言
        updataOne(l,i){
            let value = window.prompt(l.title,l.content)
            if(value && value !=l.content){
                // $.ajax({
                //     url:"http://localhost:2116/list/"+l.id,
                //     type:"PATCH",
                //     data:{
                //         content:value
                //     },
                //     success:res=>{
                //         l.content=value;
                //         this.list.splice(i,1,l)
                //     }
                // })
                axios.patch("./list/"+l.id,{content:value}).then(res=>{
                    l.content=value;
                    this.list.splice(i,1,l)
                })
            }
        },
        //删除留言
        deleteOne(l,i){
            // $.ajax({
            //     url:"http://localhost:2116/list/"+l.id,
            //     type:"DELETE",
            //     success:res=>{
            //         this.list.splice(i,1)
            //     }
            // })
            axios.delete("./list/"+l.id)
            .then(res=>{
                this.list.splice(i,1)
            })
        },
        async getList(){
            // $.ajax({
            //     url:"http://localhost:2116/list",
            //     type:"GET",
            //     success:res=>{
            //         this.list=res;
            //         this.getList()
            //     }
            // })
            // 1号
            // axios.get("./list")
            // .then(res=>{
            //     this.list=res.data;
            //     this.getList()
            // })
            // 2号
            let res = await axios.get("/list")
            this.list=res.data

        },
        addTodata(){
            // POST请求提交
            if(this.form.title && this.form.content){
                // $.ajax({
                //     url:"http://localhost:2116/list",
                //     type:"POST",
                //     data:this.form,
                //     success:res=>{
                //         this.form={}
                //     }
                // })
                axios.post("/list",this.form).then(res=>{
                    this.form={}
                    this.getList()
                })
            }else{
                alert("留言不可以为空")
            }
        }
    },
    mounted(){
        // GET请求查询

        // 方法一
        // axios({
        //     url:"http://localhost:2116/msg",
        //     type:"GET",
        //     success:res=>{
        //         console.log(res)
        //         this.msg=res[0]
        //     }
        // })

        // 方法二
//         $.get("http://localhost:2116/msg").then(res=>{
//             this.msg=res[0]
//         },err=>{
//             console.log(err)
//         })
        //    axios({
        //        url:"/msg",
        //        method:"GET",
        //        params:{id:2116}
        //    }).then(res=>{
        //        this.msg=data.res[0]
        //    })
        axios.get("/msg",{
            params:{id:2116}
        })
        .then(res=>{
            this.msg=data.res[0]
        })
    }
}
</script>